import React from 'react';
import styles from './BellaHeader.less';
import ArrowLeftOutlined from '@ant-design/icons/lib/icons/ArrowLeftOutlined';
import { udp } from '@cscec/udp-mobile-ui';
import { HomeOutlined } from '@ant-design/icons';
import { useAudioPlay } from '@/hooks/useAudioPlay';

interface BellaHeaderProps {
  title?: string;
  desc?: string;
  showBack?: boolean;
  onBack?: () => void;
  onMain?: () => void;
  showStar?: boolean;
  starColor?: string;
}

const BellaHeader: React.FC<BellaHeaderProps> = ({
  title = "",
  desc = "",
  showBack = true,
  onBack,
  onMain,
  showStar = true,
  starColor = "#FFD700"
}) => {

  const { isPlaying, isLoading, playAudio, stopAudio } = useAudioPlay({});
  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      window.history.back();
    }
      stopAudio()//所有跳转时，停止朗读,优化体验
  };
  const handleMain = () => {
     udp.open('/BellaEnglish')
     stopAudio()//所有跳转时，停止朗读,优化体验
  }

  function removeAllQuotes(str) {
  return str.replace(/["'“”‘’]/g, '');
}
  return (
    <div className={styles["bella-header-container"]}>
      <div className={styles["top-gradient"]}>
        <div className={styles["header-content"]}>
          <div className={styles["header-top"]}>

              <div className={styles["logo-icon"]}
              //className="logo-icon floating"
              >
                {showBack && (
                  <div className={styles["circle-button"]} onClick={handleBack}>
                    <ArrowLeftOutlined type="left" className={styles["back-icon" ]}/>
                  </div>
                )}
              </div>
              <h1 className={styles["header-title"]}>{removeAllQuotes(title)}</h1>
            {showStar && (
              <div className={styles["circle-button"]} onClick={handleMain}>
                <HomeOutlined type="star" className={styles["star-icon"]} />
              </div>
            )}
          </div>
          {/* <div className="welcome-message floating-delay-2">
            <p>{desc}</p>
          </div> */}
        </div>
        {/* 浮动装饰元素 */}
        <div className={styles["floating-circle"]}></div>
        {/* <div className="floating-circle pink"></div>
        <div className="floating-circle green"></div> */}
      </div>
    </div>
  );
};

export default BellaHeader;